<style lang="scss" scoped>
.rate_set_wrap {
  margin-bottom: 20px;
  width: 100%;
  .rate_set_item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    &.empty {
      line-height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #e5e5e5;
      width: 100%;
    }
    &.rate_set_header {
      font-weight: 550;
      font-size: 14px;
      color: #333;
      margin-bottom: 10px;
    }
    .rate {
      width: 200px;
    }
    .nickname {
      width: 200px;
    }
    .time {
      flex: 1;
      display: flex;
      align-items: center;
      .select-box {
        display: flex;
        align-items: center;
      }
    }
  }
  .rate_set_main {
    max-height: 200px;
    overflow-y: auto;
    width: 100%;
  }
}
</style>

<template>
  <div class="rate_set_wrap">
    <div class="rate_set_header rate_set_item">
      <div class="rate">账号ID</div>
      <div class="nickname">账号名称</div>
      <div class="nickname">关联投手</div>
      <div class="time">操作</div>
    </div>
    <div class="rate_set_main">
      <div class="rate_set_item empty" v-if="!formData.rateList.length">
        暂无数据
      </div>
      <el-form
        label-width="0px"
        :rules="rules"
        ref="formRef"
        :inline="true"
        :model="formData"
      >
        <div
          class="rate_set_item"
          v-for="(item, index) in formData.rateList"
          :key="index"
        >
          <div class="rate">
            <el-form-item
              :prop="'rateList.' + index + '.accountId'"
              :rules="{
                required: true,
                message: '请输入账号ID',
                trigger: 'blur',
              }"
            >
              <el-input
                v-model="item.accountId"
                placeholder="请输入账号ID"
                clearable
              />
            </el-form-item>
          </div>
          <div class="nickname">
            <el-form-item
              :prop="'rateList.' + index + '.accountName'"
              :rules="{
                required: true,
                message: '请输入账号名称',
                trigger: 'blur',
              }"
            >
              <el-input
                v-model="item.accountName"
                placeholder="请输入账号名称"
                clearable
              />
            </el-form-item>
          </div>
          <div class="nickname">
            <el-form-item
              :prop="'rateList.' + index + '.username'"
              :rules="{
                required: true,
                message: '请选择关联投手',
                trigger: 'blur',
              }"
            >
              <el-select
                v-model="item.username"
                style="width: 100%"
                placeholder="请选择关联投手"
                clearable
              >
                <el-option
                  v-for="item in pitcherList"
                  :key="item.id"
                  :value="item.username"
                  :label="item.username"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="time">
            <el-form-item>
              <div class="select-box">
                <el-popconfirm
                  title="确认删除该账户?"
                  @confirm="deleteItem(index)"
                >
                  <template #reference>
                    <el-button type="warning">删除</el-button>
                  </template>
                </el-popconfirm>
              </div>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <el-button @click="addReateItem" :icon="Plus" type="primary"
      >新增</el-button>

  </div>
</template>

<script setup>
import { Plus } from "@element-plus/icons-vue";
import { reactive, watch } from "vue";
import useForm from "@/hooks/useForm";
import { delViscount } from "@/apis/media";
import { ElMessage } from "element-plus";

const props = defineProps({
  mediaAccount: {
    type: Array,
    default: () => [],
  },
  pitcherList: {
    type: Array,
    default: () => []
  }
});
watch(
  () => props.mediaAccount,
  (val) => {
    formData.rateList = val;
  }
);
const { formRef, search, validate } = useForm();
const rules = {};
const formData = reactive({
  rateList: props.mediaAccount || []
});
// 删除比例
const deleteItem = (index) => {
  const { id } = formData.rateList[index];
  if (!id) {
    formData.rateList.splice(index, 1);
    ElMessage({
      message: "删除成功",
      type: "success",
    });
  } else {
    delViscount(id).then(() => {
      formData.rateList.splice(index, 1);
      ElMessage({
        message: "删除成功",
        type: "success",
      });
    });
  }
  // formData.rateList.splice(index, 1);
};
// 新增比例
const addReateItem = () => {
  formData.rateList.push({
    accountId: "",
    accountName: "",
    username: "",
  });
};
defineExpose({
    validate: () => new Promise((resolve, reject) => {
        formRef.value.validate((valid) => {
            // 表单校验成功
            valid ? resolve() : reject()
        })
    })
})
</script>
